<template>
  <div class="storeAdd" v-if="num==='1'">
    <el-steps :active="active" finish-status="success" :space="600">
      <el-step title="基础信息"></el-step>
      <el-step title="分配库位" class="stpes"></el-step>
    </el-steps>
    <div class="form" v-if="isShow === 1">
      <el-form :model="form" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item prop="code" label="货主编号">
              <el-input
                placeholder="请输入"
                v-model="form.code"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货主名称" prop="name">
              <el-input placeholder="请输入" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="personName">
              <el-input
                placeholder="请输入"
                v-model="form.personName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人电话" prop="phone">
              <el-input placeholder="请输入" v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="联系人邮箱" prop="email">
              <el-input placeholder="请输入" v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="省/市/区" prop="location">
              <el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input placeholder="请输入" v-model="form.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input placeholder="请输入" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="ownerBox" v-else-if="isShow === 2">
      <div class="tableInfo">
        <button class="btn1" @click="dialogFormVisible = true">分配库位</button>
        <button class="btn2" @click="quXiao">取消分配</button>
      </div>
      <el-table
        :data="tableList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号"
      width="55">
    </el-table-column>
    <el-table-column
      prop="warehouseName"
      label="仓库名称"
      >
    </el-table-column>
    <el-table-column
      prop="areaName"
      label="库区名称"
      >
    </el-table-column>
    <el-table-column
      prop="locationCode"
      label="库位编号"
      >
    </el-table-column>
    <el-table-column
      prop="locationName"
      label="库位名称"
      >
    </el-table-column>
    <el-table-column
      label="操作"
      show-overflow-tooltip>
       <template slot-scope="scope">
        <span @click="cancle(scope.row.id)" style="cursor:pointer">取消分配</span>
       </template>
    </el-table-column>
    </el-table>
     <page-tool
        :total="tableData.total"
        :paginationPage="tableData.pages"
        :paginationPagesize="tableData.size"
        @pageChange="pageChangeFn"
        @pageSizeChange="pageSizeChangeFn"
      />
    </div>
    <div class="buttonBox" v-if="isShow===1">
      <button class="btn1" @click="$router.back()">返回</button>
      <button class="btn2" @click="submit">下一步</button>
    </div>
    <div class="buttonBox" v-if="isShow === 2">
      <button class="btn1" @click="back">上一步</button>
      <button class="btn2" @click="submit1">提交</button>
    </div>
    <el-dialog title="分配货主库位" :visible.sync="dialogFormVisible">
      <el-form>
        <el-cascader :props="props" v-model="ownerKW" collapse-tags clearable></el-cascader>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addFn">确 定</el-button>
  </div>
    </el-dialog>
  </div>

  <div class="warehouse" v-else>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础信息" name="1">
        <el-descriptions class="margin-top" :column="4" direction="vertical">
          <el-descriptions-item label="货主编号">{{form.code}}</el-descriptions-item>
          <el-descriptions-item label="货主名称">{{form.name}}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{form.personName}}</el-descriptions-item>
          <el-descriptions-item label="联系人电话">{{form.phone}}</el-descriptions-item>
          <el-descriptions-item label="联系人邮箱">{{form.email}}</el-descriptions-item>
          <el-descriptions-item label="省/市/区">{{form.location}}</el-descriptions-item>
          <el-descriptions-item label="详细地址" :span="2">{{form.address}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{form.remark ? form.remark: '暂无'}}</el-descriptions-item>
      </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="库位信息" name="2" @change="Kuwei">
        <div class="infoTip">总计：6个库位 103个货品</div>
        <el-table
        :data="tableList"
        style="width: 100%"
      >
    <el-table-column
      label="序号"
      width="55">
    </el-table-column>
    <el-table-column
      prop="warehouseName"
      label="仓库名称"
      >
    </el-table-column>
    <el-table-column
      prop="areaName"
      label="库区名称"
      >
    </el-table-column>
    <el-table-column
      prop="locationCode"
      label="库位编号"
      >
    </el-table-column>
    <el-table-column
      prop="locationName"
      label="库位名称"
      >
    </el-table-column>
    </el-table>
     <page-tool
        :total="tableData.total"
        :paginationPage="tableData.pages"
        :paginationPagesize="tableData.size"
        @pageChange="pageChangeFn"
        @pageSizeChange="pageSizeChangeFn"
      />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { edit, getCode, getEditList, add, getStatus, getTree, getAddList, getDetail, cancle } from '@/api/business/ownerManage'
import { regionData, CodeToText } from 'element-china-area-data'
import PageTool from '@/components/page-tool/PageTool.vue'
export default {
  name: 'detail-page',
  components: { PageTool },
  data () {
    return {
      form: {
        address: '',
        area: '',
        city: '',
        code: '',
        location: '',
        name: '',
        personName: '',
        phone: '',
        province: '',
        id: '',
        remark: '',
        eamil: ''
      },
      rules: {
        code: [{ required: true, message: '请输入', trigger: ['blur'] }],
        location: [{ required: true, message: '请输入', trigger: ['blur'] }],
        name: [{ required: true, message: '请输入', trigger: ['blur'] }],
        personName: [{ required: true, message: '请输入', trigger: ['blur'] }],
        phone: [{ required: true, message: '请输入', trigger: ['blur'] }]
      },
      options: regionData,
      selectedOptions: [],
      active: 0,
      isShow: 1,
      tableData: [],
      tableList: [],
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        multiple: true
      },
      dialogFormVisible: false,
      ownerKW: '',
      form1: {
        current: 1,
        size: 10
      },
      multipleSelection: [],
      num: '1',
      activeNames: ['1']
    }
  },
  methods: {
    async submit () {
      if (this.$route.query.id) {
        this.form.area = this.selectedOptions[2]
        this.form.city = this.selectedOptions[1]
        this.form.province = this.selectedOptions[0]
        await edit(this.form)
        this.$message.success('操作成功')
      } else {
        this.form.area = this.selectedOptions[2]
        this.form.city = this.selectedOptions[1]
        this.form.province = this.selectedOptions[0]
        this.form.location = `${CodeToText[this.selectedOptions[0]]}/${
          CodeToText[this.selectedOptions[1]]
        }/${CodeToText[this.selectedOptions[2]]}`
        console.log(this.form)
        await add(this.form)
        this.$message.success('操作成功')
      }
      if (this.active++ > 1) this.active = 0
      this.isShow = 2
      this.getDetail()
      this.lazyLoad()
    },
    lazyLoad (node, resolve) {
      this.getData(node, resolve)
    },
    async getData (node, resolve) {
      const level = node.level
      if (!node.data) {
        await getStatus().then(res => { // 接口
          const nodes = Array.from(res.data).map(item => ({
            value: item.id,
            label: item.name,
            leaf: level >= 3
          }))
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes)
        })
      } else {
        await getTree(node.data.value).then(
          res => {
            const nodes = Array.from(res.data).map(item => ({
              value: item.value,
              label: item.label,
              children: item.children,
              leaf: level >= 3
            }))
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          }
        )
      }
    },
    async addFn () {
      await getAddList([...this.ownerKW, this.$route.query.id])
      this.$message.success('操作成功')
      this.dialogFormVisible = false
      this.getDetail()
    },
    async getDetail () {
      const { data } = await getDetail({ current: this.form1.current, size: this.form1.size, ownerId: this.$route.query.id })
      this.tableList = data.records
      this.tableData = data
    },
    async cancle (id) {
      await cancle(id)
      this.getDetail()
      this.$message.success('操作成功')
    },
    pageChangeFn (pageNum) {
      console.log(pageNum)
      this.form1.current = pageNum
      this.getDetail()
    },

    pageSizeChangeFn (pageSize) {
      console.log(pageSize)
      this.form1.size = pageSize
      this.getDetail()
    },

    submit1 () {
      this.$router.push('/ownerManage')
    },
    back () {
      this.isShow = 1
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    quXiao () {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请先勾选，要取消的选项')
      } else if (this.multipleSelection.length === 1) {
        console.log(this.multipleSelection[0].id)
        this.cancle(this.multipleSelection[0].id)
        this.getDetail()
      } else if (this.multipleSelection.length > 1) {
        this.$message.warning('宝儿，请一个一个删，爱你哟~~')
      }
    },
    Kuwei () {
      console.log(123)
    },
    async getCK () {
      const { data } = await getCode()
      this.form.code = data
    }
  },
  async created () {
    this.getCK()
    if (this.$route.query.id) {
      const { data } = await getEditList(this.$route.query.id)
      this.form = data
      this.selectedOptions = [data.province, data.city, data.area]
      console.log(this.selectedOptions)
    }
    if (this.$route.query.num) {
      this.num = this.$route.query.num
    }
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.storeAdd {
  height: 509px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  margin-top: 20px;
  margin-left: 29px;
  margin-right: 29px;
  padding-top: 31px;
  padding-bottom: 30px;
  .el-steps {
    justify-content: center;
    .stpes {
        flex-basis: 100px!important;
        width: 100px;
      }
  }

  .form {
    padding-left: 30px;
    padding-right: 30px;
    .el-row {
      margin-bottom: 30px;
      p {
        line-height: 18px;
        padding-bottom: 10px;
        padding-left: 5px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #887e7e;
      }
      .el-input {
        ::v-deep .el-input__inner {
          background: #f8f5f5;
          border-color: #f3ebeb;
          color: #b5abab;
        }
      }
      .el-select {
        ::v-deep .el-input__inner {
          background: #f8f5f5;
          border-color: #f3ebeb;
          color: #b5abab;
        }
      }
      .el-form-item {
        margin-bottom: 0;
        ::v-deep .el-form-item__label {
          line-height: 28px;
          margin-bottom: 5px;
        }
        ::v-deep .el-form-item__content {
          line-height: 20px;
          .el-radio-group {
            margin-top: 40px;
            margin-left: -68px;
          }
          .el-cascader {
            margin-top: 32px;
            margin-left: -75px;
            width: 317px;
          }
        }
      }
    }
    .area {
      .f1 {
        position: relative;
        .div {
          width: 40px;
          height: 40px;
          background: #e7dfdf;
          border-radius: 0 6px 6px 0;
          padding: 10px 10px;
          border: 0;
          color: #5d5d5d;
          vertical-align: middle;
          display: table-cell;
          position: absolute;
          right: 0;
          top: 33px;
        }
      }
    }
  }
  .tableInfo {
    padding: 20px 30px;
    padding-top: 40px;
    .btn1 {
      margin-right: 30px;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      background: #00be76;
      color: #fff;
    }
    .btn2 {
      margin-right: 30px;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      background: #f8f5f5;
      color: #332929;
    }
  }

  .buttonBox {
    padding: 15px 20px;
    border-top: 1px solid #f5efee;
    text-align: center;
    .btn1 {
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
      background: #f8f5f5;
      color: #332929;
    }
    .btn2 {
      background: #ffb200;
      color: #332929;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
  }
}

.warehouse {
  margin: 20px 30px 30px 30px;
  .el-collapse {
    border-top: 0;
    border-bottom: 0;
    .el-collapse-item {
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    margin-bottom: 25px;
    padding: 14px 27px 15px;
    ::v-deep .el-collapse-item__header {
      border-bottom: 0;
      }
    ::v-deep .el-collapse-item__wrap {
      border-bottom: 0;
    }
    .infoTip {
      display: inline-block;
      height: 32px;
      line-height: 30px;
      background: #fff9eb;
      border: 1px solid #ffb200;
      padding: 0 25px;
      margin: 20px 0;
    }

    .el-descriptions {
      font-size: 13px;
      color: #303133;
      line-height: 1.7692307692;
      background: #fdfcf9;
      border: 1px solid #f7f2f1;
      padding: 25px 30px;
      ::v-deep .el-descriptions__body {
        background: #fdfcf9;
        tbody {
          margin-bottom: 20px;
          th {
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
    }
  }
  }
}
</style>
